<!DOCTYPE html>
<html>
<head>
	<title>Lightbox</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">

	<!-- jQuery, -->
	<script src="jquery/jquery-1.10.1.min.js"></script>

	<!-- Fotorama -->
	<link  href="../out/fotorama.css" rel="stylesheet">
	<script src="../out/fotorama.js"></script>
</head>

<body>

<p>Lightbox. View page source for details.<p>

<style>
  .fullscreen,
  .fotorama--fullscreen,
  .fotorama--fullscreen .fotorama__stage,
  .fotorama--fullscreen .fotorama__nav,
  .fotorama-overlay {
    background-color: #f5f2ed;
  }

  .thumbs > .fotorama {
    overflow: visible;
  }

  /* style thumbs a bit */
  .thumbs a {
    text-decoration: none;
    display: inline !important;
    color: #34457b;
  }
  .thumbs a:hover {
    color: #af1d05;
  }
  .thumbs a.switch {
    border-bottom: 1px dashed;
  }
  .thumbs img {
    width: auto;
    height: 72px;
    border: 2px #fff solid;
    margin-left: -2px;
  }

  .thumbs a:hover img {
    border-color: #00afea;
  }

  /* straight “close” icon instead of “cancel fullscreen” */
  .fotorama--fullscreen .fotorama__fullscreen-icon {
    background-position: -64px 0;
  }
</style>

<script>
  $(function () {

    // overlay for smoother fullscreen enter
    var $overlay = $('<div class="fotorama-overlay"></div>')
        .css({position: 'fixed', top: 0, right: 0, bottom: 0, left: 0, zIndex: 10001})
        .fadeTo(0, 0)
        .hide()
        .appendTo('body');

    // take all .fotorama blocks
    $('.thumbs').each(function () {
      var $thumbs = $(this),

          // clone it and make fotorama
          $fotorama = $('.fotorama', $thumbs)
              .clone()
              //.show()
              .css({position: 'absolute', left: -99999, top: -99999})
              .appendTo('body')
              .fadeTo(0, 0)
              .fotorama(),
          fotorama = $fotorama.data('fotorama');

      for (var _i = 0, _l = fotorama.data.length; _i < _l; _i++) {
        // prepare id to use in fotorama.show()
        fotorama.data[_i].id = fotorama.data[_i].img;
      }

      // bind clicks
      $thumbs.on('click', 'a', function (e) {
        e.preventDefault();

        var $this = $(this);

        $overlay
            .show()
            .stop()
            .fadeTo(150, 1, function () {
              $fotorama.stop().fadeTo(150, 1);

              // API calls
              fotorama
                  // show needed frame
                  .show({index: $this.attr('href'), time: 0})
                  // open fullscreen
                  .requestFullScreen();
            });
      });

      $fotorama.on('fotorama:fullscreenexit', function () {
        $fotorama.stop().fadeTo(0, 0);
        $overlay.stop().fadeTo(300, 0, function () {
          $overlay.hide();
        });
      });
    });

  });
</script>

<!-- Thumbs -->
<div class="thumbs">
  <p style="margin-bottom: .5em;"><a href="#" class="switch">Photos</a>:</p>

  <!-- Fotorama, `data-auto="false"` is important -->
  <div class="fotorama"
       data-auto="false"
       data-allow-full-screen="true"
       data-thumb-width="70"
       data-thumb-height="47"
       data-nav="thumbs">
    <a href="i/okonechnikov/1-lo.jpg"><img src="i/okonechnikov/1-thumb.jpg"></a>
    <a href="i/okonechnikov/2-lo.jpg"><img src="i/okonechnikov/2-thumb.jpg"></a>
    <a href="i/okonechnikov/4-lo.jpg"><img src="i/okonechnikov/4-thumb.jpg"></a>
    <a href="i/okonechnikov/5-lo.jpg"><img src="i/okonechnikov/5-thumb.jpg"></a>
    <a href="i/okonechnikov/6-lo.jpg"><img src="i/okonechnikov/6-thumb.jpg"></a>
  </div>
</div>

<!-- © -->
<p>Photos <a href="http://okonet.ru/">by Andrey Okonetchnikov</a></p>
</body>
</html>